<template>
    <div class="productCode-dataSave-wrap">
        <el-button
            type="warning"
            icon="el-icon-setting"
            @click="_clickdataSetting"
            :size="size"
        >{{$t('m.button.dataColumnSetting')}}</el-button>
        <el-dialog
            :title="$t('m.button.dataColumnSetting')"
            :visible.sync="dialogTableVisible"
            :width="w"
            :h="h"
        >
            <el-checkbox-group v-model="findDataSave" @change="handleCheckedCitiesChange">
                <template v-for="item in allColumns">
                    <el-checkbox
                        :label="item.property"
                        :key="item.key"
                        v-if="item.property"
                    >{{ item.label }}</el-checkbox>
                </template>
            </el-checkbox-group>
            <div slot="footer" class="dialog-footer">
                <el-checkbox
                    :indeterminate="isIndeterminate"
                    v-model="checkAll"
                    @change="handleCheckAllChange"
                >{{$t('m.button.selectAll')}}</el-checkbox>
                <el-button
                    type="primary"
                    :icon="loading ? 'el-icon-loading' : ''"
                    @click="_findDataSave()"
                >{{$t('m.button.save')}}</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script>
const ERR_OK = 200;
export default {
    props: ["columns", "allColumns", "h", "w", "size"],
    data() {
        return {
            dialogTableVisible: false,
            findDataSave: [],
            checkAll: false,
            isIndeterminate: true,
            loading: false
        };
    },
    methods: {
        handleCheckAllChange(val) {
            let data = [];
            for (let i in this.allColumns) {
                data.push(this.allColumns[i].property);
            }
            this.findDataSave = val ? data : [];
            this.isIndeterminate = false;
        },
        handleCheckedCitiesChange(value) {
            let checkedCount = value.length; 
            this.checkAll = checkedCount === this.allColumns.length;
            this.isIndeterminate =
                checkedCount > 0 && checkedCount < this.allColumns.length;
        },
        _findDataSave() {
            this.loading = true;
            this.$emit("updColumns", this.findDataSave);
        },
        _clickdataSetting() {
            this.dialogTableVisible = true;
            this.findDataSave = JSON.parse(JSON.stringify(this.columns));
        },
        dataColumhide() {
            this.loading = false;
            this.dialogTableVisible = false;
        }
    }
};
</script>
<style lang="stylus" scoped>
.productCode-dataSave-wrap {
    display: inline-block;

    .el-dialog__body {
        padding: 10px;
    }

    .el-checkbox {
        margin: 8px;
        width: 175px;
    }
}
</style>
